<template>
  <div class="search">
    <van-search
      v-model.trim="keyword"
      show-action
      placeholder="商品搜索"
      @input="onInput"
    />
    <div class="default" v-if="pageState == STATE.DEFAULT">
      <!-- 历史记录 -->
      <div class="history" v-if="historyList.length">
        <div class="history-head">
          <span>历史记录</span>
          <img
            src="../../../assets/images/del-address.png"
            alt=""
            @click="handleDelClick"
          />
        </div>
        <div class="list">
          <div
            class="item"
            v-for="item in historyList"
            :key="item.id"
            @click="handleItemClick(item)"
          >
            {{ item.keyword }}
          </div>
        </div>
      </div>
      <div class="hot">
        <div class="hot-head">
          <span>热门搜索</span>
        </div>
        <div class="list">
          <div
            class="item"
            v-for="item in hotKeywordList"
            :key="item.id"
            :class="{ act: item.is_hot }"
            @click="handleItemClick(item)"
          >
            {{ item.keyword }}
          </div>
        </div>
      </div>
    </div>
    <!-- 搜索结果列表 -->
    <div class="search-list" v-else-if="pageState == STATE.LIST">
      <div
        class="item"
        v-for="item in keywordList"
        :key="item.id"
        @click="handleItemClick(item)"
      >
        {{ item.name }}
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="goods" v-else>
      <div class="goods-head">
        <div
          class="head-item"
          :class="{ act: activeKey == 0 }"
          @click="handNavClick(0)"
        >
          <span>综合</span>
        </div>
        <div
          class="head-item"
          :class="{ act: activeKey == 1 }"
          @click="handNavClick(1)"
        >
          <span>价格</span>
          <div class="arrow">
            <van-icon
              name="arrow-up"
              :color="order == 'asc' ? '#b4282d' : ''"
            />
            <van-icon
              name="arrow-down"
              :color="order == 'desc' ? '#b4282d' : ''"
            />
          </div>
        </div>
        <div
          class="head-item"
          :class="{ act: activeKey == 2 }"
          @click="handNavClick(2)"
        >
          <span>分类</span>
        </div>
      </div>
      <div class="list" v-if="goodsList.length">
        <router-link
          tag="div"
          class="item"
          v-for="item in goodsList"
          :key="item.id"
          :to="`/goods/goodsdetail?id=${item.id}`"
        >
          <img :src="item.list_pic_url" alt="" />
          <p>{{ item.name }}</p>
          <p class="price">￥{{ item.retail_price }}</p>
        </router-link>
      </div>
      <div class="empty" v-else>
        <van-empty description="暂无数据" />
      </div>
    </div>
  </div>
</template>
<script>
import {
  indexaction,
  helperaction,
  addhistoryaction,
  clearhistoryAction,
} from "@/api/home/search";
// 页面状态
const STATE = {
  DEFAULT: 0, // 默认
  LIST: 1, // 搜索列表
  GOODS: 2, // 商品列表
};
export default {
  data() {
    return {
      STATE,
      keyword: "", // 输入框内容
      order: "", // 排序
      selectKeyword: "", //被点击选中的关键词
      activeKey: 0, // 被选中的nav
      pageState: STATE.DEFAULT, // 页面状态
      historyList: [], // 历史记录
      hotKeywordList: [], // 热门关键词
      keywordList: [], // 关键词搜索列表
      goodsList: [], //商品列表
    };
  },
  methods: {
    async init() {
      const resp = await indexaction({
        openId: localStorage.getItem("openId"),
      });
      this.historyList = resp.historyData;
      this.hotKeywordList = resp.hotKeywordList;
    },

    async onInput() {
      // 如果输入框内容等于0切换为DEFAULT状态并return
      if (!this.keyword.length) {
        this.pageState = STATE.DEFAULT;
        this.goodsList = [];
        return;
      }
      this.pageState = STATE.LIST;
      const { keywords } = await helperaction({
        keyword: this.keyword,
      });
      this.keywordList = keywords;
    },
    // 关键词列表点击
    handleItemClick(item) {
      this.pageState = STATE.GOODS;
      // 历史记录&热门关键词&搜索列表点击兼容处理
      this.selectKeyword = item.name || item.keyword;
      this.getGoodsList();
    },
    // 获取商品
    async getGoodsList() {
      // 获取商品
      const { keywords } = await helperaction({
        keyword: this.selectKeyword,
        order: this.order,
      });
      this.goodsList = keywords;
      // 添加到历史记录
      await addhistoryaction({
        keyword: this.selectKeyword,
        openId: localStorage.getItem("openId"),
      });
      // 重新获取历史记录
      this.init();
    },
    // nav点击事件
    handNavClick(index) {
      this.activeKey = index;
      if (index === 1) {
        if (this.order == "" || this.order == "desc") {
          this.order = "asc";
        } else {
          this.order = "desc";
        }
      } else {
        this.order = "";
      }
      this.getGoodsList();
    },
    // 删除按钮
    async handleDelClick() {
      const { data } = await clearhistoryAction();
      this.$toast(data);
      // 重新获取历史记录
      this.init();
    },
  },
  created() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
